<script module lang="ts">
    import { defineMeta } from "@storybook/addon-svelte-csf";
    import TeleportBox from "./TeleportBox.svelte";
    import { Row } from "../Row";
    import { Col } from "../Col";
    import { Button } from "../Button";
    import dayjs from "dayjs";
    import { BothSide } from "../BothSide";
    import type { TeleportBoxItem } from "./TeleportBox";
    import { Checkbox } from "../Checkbox";
    import { Space } from "../Space";
    import { Avatar } from "../Avatar";
    import Icon from "../Common/Icons/Icon.svelte";

    const { Story } = defineMeta({
        title: "Components/Form/TeleportBox",
        component: TeleportBox,
        tags: ["autodocs"],
        argTypes: {},
        args: {},
    });

    const data: any[] = new Array(30).fill(0).map((_, index) => ({ value: index, label: `列表选项${index}` }));
    data[3].disabled = true;

    let value = $state<string[]>([]);
</script>

<Story name="Default">
    {#snippet template(args)}
        <TeleportBox {data} style="width: 500px" defaultValue={[3]} />
    {/snippet}
</Story>

<Story name="Disabled">
    {#snippet template(args)}
        <TeleportBox {data} style="width: 500px" disabled defaultValue={[3]} />
    {/snippet}
</Story>

<Story name="Group">
    {#snippet template(args)}
        {@const data = [
            {
                value: "A",
                label: "类别A",
                children: [
                    { value: "A1", label: "A-1" },
                    { value: "A2", label: "A-2" },
                ],
            },
            {
                value: "B",
                label: "类别B",
                children: [
                    { value: "B1", label: "B-1", checked: true, disabled: true },
                    { value: "B2", label: "B-2" },
                ],
            },
            {
                value: "C",
                label: "类别C",
                children: [
                    { value: "C1", label: "C-1" },
                    { value: "C2", label: "C-2" },
                ],
            },
        ]}
        <TeleportBox {data} style="width: 500px" defaultValue={["B1"]} />
    {/snippet}
</Story>

<Story name="CustomRender">
    {#snippet template(args)}
        {@const data = [
            { value: "1", label: "赵乾", email: "zhaoqian@example.com" },
            { value: "2", label: "钱坤", email: "wangquan@example.com" },
            { value: "3", label: "孙权", email: "sunwei@example.com" },
            { value: "4", label: "李白", email: "lisi@example.com" },
            { value: "5", label: "周瑜", email: "zhoushuai@example.com" },
            { value: "6", label: "吴刚", email: "wujiang@example.com" },
            { value: "7", label: "诸葛亮", email: "zhuge@example.com" },
            { value: "8", label: "曹操", email: "caocao@example.com" },
            { value: "9", label: "刘备", email: "liubei@example.com" },
        ]}
        {#snippet renderSourceItem(item: TeleportBoxItem, onItemChecked: (checked: boolean) => void)}
            <Space>
                <Checkbox checked={item.checked} disabled={item.disabled} onchange={(checked) => onItemChecked(checked)}>
                    {#snippet label()}
                        <Space align="center" style="height: 46px">
                            <Avatar style="background-color: var(--cui-theme-color-gold)">{(item.label as string).substring(0, 1)}</Avatar>
                            <Space dir="v" size={0} style="min-width: 0, line-height: 18px">
                                <span style="font-size: 13px">{item.label}</span>
                                <span style="font-size: 12px; color: #999">{item.email}</span>
                            </Space>
                        </Space>
                    {/snippet}
                </Checkbox>
            </Space>
        {/snippet}
        {#snippet renderSelectedItem(item: TeleportBoxItem, onItemRemove: () => void)}
            <BothSide class="cm-teleprt-custom-select-item">
                <Space align="center" style="height: 46px">
                    <Avatar style="background-color: var(--cui-theme-color-gold)">{(item.label as string).substring(0, 1)}</Avatar>
                    <Space dir="v" size={0} style="min-width: 0, line-height: 18px">
                        <span style="font-size: 13px">{item.label}</span>
                        <span style="font-size: 12px; color: #999">{item.email}</span>
                    </Space>
                </Space>
                <Icon icon="times" onclick={() => onItemRemove()} style="cursor: pointer" />
            </BothSide>
        {/snippet}
        {@const customFilter = (item: TeleportBoxItem, keyword: string) => {
            return item.label.includes(keyword) || item.email.includes(keyword);
        }}
        <TeleportBox {data} bind:value defaultValue={["1", "3"]} filter={customFilter} {renderSourceItem} {renderSelectedItem} style="width: 500px" />
    {/snippet}
</Story>

<Story name="Virtual">
    {#snippet template(args)}
        {@const data: any[] = new Array(300).fill(0).map((_, index) => ({value: index, label: `列表选项${index}`}))}
        <TeleportBox {data} style="width: 500px" virtual />
    {/snippet}
</Story>
